<template>
  <div class="ele-body" v-if="activeName==='process'">
    <div shadow="none" class="topCard">
      <div class="topItemWrap">

        <div class="topItem">
          <div>网点审批延误</div>
          <div>0</div>
        </div>
        <div class="topItem">
          <div>备件中心审批延误</div>
          <div>8</div>
        </div>

      </div>
    </div>
    <div class="middleBox">
      <div class="middleItem">
        <div>
          <div class="middleItemTitle">本月延误比例</div>
          <el-divider></el-divider>
        </div>
        <div id="processMiddleLeft" class="middleChart"></div>
      </div>
      <div class="middleItem">
        <div>
          <div>
            <div class="middleItemTitle">服务网点未处理条数</div>
            <el-divider></el-divider>
          </div>
        </div>
        <div class="middleChart" id="processMiddleMiddle"></div>
      </div>
      <div class="middleItem">
        <div>
          <div>
            <div class="middleItemTitle">
              <div>
                <div class="middleItemTitle">基地审批完成率</div>
                <el-divider></el-divider>
              </div></div>
            <div class="middleChart" id="processMiddleRight"></div>
          </div>
        </div>
        <div ></div>
      </div>

    </div>

    <div class="bottomBox" id="processBottomChart"></div>

  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props: ['activeName'],
  data() {
    return {
      echartsGroup: [],
      styleKey: {
        'BC类总体满足率': {bg: '#e4f4ef', fc: '#1fa881'},
        '4小时到位率': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时完工率': {bg: '#fff5d6', fc: '#fed13b'},
        '30天交货率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      BottomStyle: {
        '本月申请单': {bg: '#e4f4ef', fc: '#1fa881'},
        '本月未发单': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时签收率': {bg: '#fff5d6', fc: '#fed13b'},
        '48小时签收率': {bg: '#f5f5f5', fc: '#c5c5c5'},
        '7天签收率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      topData: [
        {
          title: 'BC类总体满足率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '销售产品', url: '#'},
            {title: '销售税条件', url: '#'},
            {title: '销售合计', url: '#'}
          ]
        },
        {
          title: '4小时到位率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '24小时完工率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
      ],
    }
  },
  methods: {
    initMiddleLeft() {
      const chartDom = document.getElementById('processMiddleLeft');
      let myChart1 = echarts.init(chartDom);
      this.echartsGroup.push(myChart1)
      let option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          // show: true,
          // text: "主标题",
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
            ]
          }
        ]
      };

      option && myChart1.setOption(option);


    },
    initMiddleMiddle() {
      const chartDom = document.getElementById('processMiddleMiddle');
      let myChart2 = echarts.init(chartDom);
      this.echartsGroup.push(myChart2)
      let option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          // show: true,
          // text: "主标题",
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
            ]
          }
        ]
      };

      option && myChart2.setOption(option);


    },
    initMiddleRight() {
      const chartDom = document.getElementById('processMiddleRight');
      let myChart3 = echarts.init(chartDom);
      this.echartsGroup.push(myChart3)
      let option;
      option = {
        title: {
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}</br>{b} : {c}%'
        },
        legend: {
          bottom: 'bottom',
          data: ['宜宾基地', '溧阳基地', '杭州基地', '东莞基地', '布达佩斯基地'],
        },
        series: [
          {
            name: '基地审批完成率',
            type: 'funnel',
            left: '1%',
            top: '5%',
            label:{
              show: true,
              formatter: "{c}%",
            },
            data: [
              { value: 98, name: '宜宾基地' },
              { value: 96, name: '溧阳基地' },
              { value: 80, name: '杭州基地' },
              // { value: 90, name: '东莞基地' },
              { value: 100, name: '布达佩斯基地' }
            ]
          },
        ]
      };

      option && myChart3.setOption(option);


    },
    initBottomChart() {
      const chartDom = document.getElementById('processBottomChart');
      let myChart4 = echarts.init(chartDom);
      this.echartsGroup.push(myChart4)
      let option;

      option = {
        title: {

        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        legend:{
          show:true
        },
        xAxis: {
          type: 'category',
          data: ['2021-2', '2021-3', '2021-4', '2021-5','2021-6']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
          },
          {
            name: 'Steppe',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
          },
          {
            name: 'Desert',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
          },
          {
            name: 'Wetland',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [98, 77, 101, 99, 40]
          }
        ]
      };

      option && myChart4.setOption(option);

    },
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.ele-body {
  font-size: px2vh(16);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.topCard {
  border-radius: px2vh(5);
  display: flex;
  background-color: #fff;
  height: px2vh(100);
  line-height: px2vh(40);
  text-align: center;
}

.topItemWrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.topItem {
  display: flex;
  justify-content: space-around;
  border-radius: px2vw(5);
  background: #f3f6fa;
  width: px2vw(400);
  height: px2vh(40);
}
.middleBox{
  margin-top: px2vh(20);
  height: px2vh(450);
  width: 100%;
  display: flex;
  justify-content: space-between;
  .middleItem{
    box-sizing: border-box;
    padding: px2vh(10) px2vw(10);
    width: 32%;
    height: 100%;
    background: #fff;
    border-radius: px2vh(10);
    .middleItemTitle{
      margin :px2vh(10) 0 px2vh(10) 0;
    }
    .middleChart{
      margin-top: px2vh(20);
      width: 100%;
      height: px2vh(350);
    }
  }
}
.bottomBox{
  border-radius: px2vh(10);
  margin-top: px2vh(20);
  height: px2vh(300);
  width: 100%;
  background: #fff;
}

</style>
